<template>
	<el-row>

		
		<el-button size="mini" type="danger" @click="deleteRole">删除</el-button>
		<el-input   type="text" v-model="query.keyword" placeholder="请输入关键字" style="width: 20%;margin-left: 30px;margin-top: 10px;" size="mini">
			<el-button slot="append" icon="el-icon-search" @click="search"></el-button>
		</el-input>
		

		<el-table height="400px" size="mini" ref="RoleTable" :data="members" stripe tooltip-effect="dark" style="width: 100%"
		 @selection-change="handleSelectionChange">

			<el-table-column type="selection" id="id" width="100">
			</el-table-column>

			<el-table-column prop="bookId" label="图书编号" width="200">
			</el-table-column>

			<el-table-column prop="studNo" label="学生学号" width="200">
			</el-table-column>

			<el-table-column prop="outTime" label="借出时间" width="200">
			</el-table-column>
			<el-table-column prop="inTime" label="还进时间" width="200">
			</el-table-column>

			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="more(scope.row)">详细</el-button>
				</template>
			</el-table-column>

		</el-table>
		<el-pagination background layout="prev, pager, next" :total="total" :current-page.sync="query.page" @current-change="pagechange">
		</el-pagination>
		
		
		
		<el-dialog title="详细" :visible.sync="dialogVisible1" width="30%">
			<p>图书编号:{{this.state.bookId}}</p>
			<p>学生姓名:{{this.state.studNo}}</p>
			<p>借书时间:{{this.state.outTime}}</p>
			<p>应还时间:{{this.state.inTime}}</p>


			
		
		
			<span slot="footer" class="dialog-footer">
				
				<el-button type="primary" size="mini" @click="dialogVisible1=false">确 定</el-button>
			</span>
		</el-dialog>








	</el-row>





</template>


<script>
	import {
		bookbroPage,
		bookbro_save,
		bookbro_remove
	} from "@/api/bookt/bookbro.js"

	export default {
		data() {
			return {
				query: {
					page: 1,
					size: 10,
					
				},
				members: [],
				selectd: [],
				dialogVisible: false,
				dialogtitle: '添加',
				form: {
					
				},
				ids: [],
				total: null,
				dialogVisible1:false,
				state:[],
				// state_list:[]
				



			}


		},
		created() {
			this.getMemberList()
		},
		methods: {
			getMemberList() {
				bookbroPage(this.query).then(res => {
					this.members = res.data.list;
					this.total = res.data.total
					console.log(this.members)

				})
			},
			handleSelectionChange(e) {
				this.selectd = e
				console.log(e)

			},
			pagechange(){
				this.query.page=e
				this.getMemberList()
				
			},
			updaterole() {
				if (this.selectd.length < 1) {
					this.$message({
						message: '请选择要修改的条目！',

					});
					return
				}
				if (this.selectd.length > 1) {
					this.$message({
						message: '只能选择一条！',

					});
					return

				}
				this.dialogVisible = true
				this.dialogtitle = '修改'
				this.form = this.selectd[0]
				console.log(this.form)






			},
			addrole() {
				
				this.dialogtitle = '添加'
				
				this.dialogVisible = true
				this.form={}
				


			},

			save(obj) {
				console.log(this.form)
				this.dialogVisible = false
				bookbro_save(this.form).then(res => {
					// console.log(res)
					this.$message({
						message: res.msg,
						type: 'success'
				
					});
					this.getMemberList()
					
				})
				
				


				
			
				
				


			},

			deleteRole() {
				if (this.selectd.length < 1) {
					this.$message({
						message: '请选择要删除的条目！',

					});
					return
				}

				for (var i = 0; i < this.selectd.length; i++) {
					this.ids.push(this.selectd[i].bookId)
					// console.log(this.ids)
				}



				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {

					bookbro_remove(this.ids).then(res => {
						this.$message({
							type: 'success',
							message: res.msg
						});
						this.getMemberList()
					})


				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			more(index,row) {
				this.dialogVisible1=true
				this.state=index
				// this.state_list.push(this.state.name,this.state.email,this.state.mobile)
				 // console.log(this.state_list)
				
				
				
			},
			search(){
				bookbroPage(this.query).then(res=>{
					this.members = res.data.list;
					this.getMemberList()
					
					
				})
				
			}

		}

	}
</script>
